<template>
	<div id="cabinRank">
		<!--修改-->
		<Modal
	        v-model="edit"
	        title="编辑舱级价格与嵌套关系"
	        class="editModal"
	        @on-ok="sureEdit">
	        <div class="content">
	        	<p class="title">
	        		<span>航班号：{{editData.flightNo}}</span>
	        		<span>启用日期：{{editData.effectiveDate ? (editData.effectiveDate).substr(0,10) : ''}}</span>
	        		<span>终止日期：{{editData.endDate ? (editData.endDate).substr(0,10) : ''}}</span>
	        	</p>
	        	<table>
	        		<tr>
	        			<th>价格</th>
	        			<th>舱位</th>
	        			<th>嵌套销售</th>
	        		</tr>
	        		<tbody v-for="detail in editData.classListPos">
	        			<tr v-for="cabin in detail">
		        			<td>{{cabin.price}}</td>
		        			<td>{{cabin.cabinCode}}</td>
		        			<td>
		        				<Checkbox></Checkbox>
		        			</td>
		        		</tr>
	        		</tbody>
	        	</table>
	        </div>
	    </Modal>
		<div class="queryPanel">
			<ul>
				
				<li>
					<span>航班：</span>
					<Select v-model="Request.flightNo" style="width:90px;">
						<Option v-for="item in flightNoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</li>
				<li>
					<span>日期：</span>
					<DatePicker v-model="Request.fromDate" type="date" placeholder="Select date"></DatePicker>
				</li>
				<li>
					<Button @click="search" class="search">查询</Button>
				</li>
			</ul>
		</div>
		<div class="content" v-if="show">
			<table>
				<tr>
					<th style="width:128px;">启用日期</th>
					<th style="width:128px;">终止日期</th>
					<th style="width:128px;">航班号</th>
					<th class="rank">舱位序列</th>					
					<th class="handle"></th>					
				</tr>
				<tbody v-for="flight in data">
					<tr>
						<td>{{(flight.effectiveDate).substr(0,10)}}</td>
						<td>{{(flight.endDate).substr(0,10)}}</td>
						<td>{{flight.flightNo}}<span v-if='flight.flightSuffix'>-</span>{{flight.flightSuffix}}</td>
						<td class="rank">{{flight.classlist}}</td>
						<td class="handle">
							<span @click="doEdit(flight)" class="iconfont" title="编辑">&#xe601;</span>
							<span @click="showDetail(flight)" v-if="!flight.show" class="iconfont" title="详情">&#xe643;</span>
							<span @click="showDetail(flight)" v-if="flight.show" class="iconfont" title="详情">&#xe775;</span>
						</td>
					</tr>
					<!--详情项-->
					<tr v-if="flight.show">
						<td>舱位</td>
						<td>布局数</td>
						<td colspan="3" class="middle">嵌套舱位</td>
					</tr>
					
					<tr v-for="(detail,key) in flight.classListPos" v-if="flight.show">						
						<td>{{key}}</td>
						<td>{{getLayoutCount(detail)}}</td>
						<td colspan="3" class="middle">
							<div>
								<p v-for="cabin in detail">
									<span>{{cabin.cabinCode}}</span>
									<span v-if='!cabin.isInclude'>(不)</span>
									<span class="price">({{cabin.price}})</span>
								</p>
							</div>
						</td>						
					</tr>
				</tbody>							
			</table>	
			
		</div>
		<Pagination :search='search' :request='Request' :data='data'/>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import "./style.scss";
</style>